<template>
    <div>
        <el-card shadow="never">
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetch()">
                <template #headerOperate>
                    <el-button type="primary" @click="newImport('')">新建对接</el-button>
                </template>
            </ZwTable>
            <Dialog :app-dialog="appDialog">
                <el-form :model="form" label-width="auto" class="form_box">
                    <el-form-item label="规则名称" required>
                        <el-input
                            v-model="form.name"
                            placeholder="请输入规则名称"
                            maxlength="8"
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="线索公海" required>
                        <el-select v-model="form.clue_seas_id" placeholder="请选择线索公海">
                            <el-option v-for="item in seaids" :key="item.id" :value="item.id" :label="item.name">{{
                                item.name
                            }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线索等级" required>
                        <el-select v-model="form.clue_level_id" placeholder="请选择线索等级">
                            <el-option v-for="item in levelid" :key="item.id" :value="item.id" :label="item.name">{{
                                item.name
                            }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线索来源">
                        <el-select v-model="form.clue_source_id" placeholder="请选择线索来源">
                            <el-option v-for="item in sourceid" :key="item.id" :value="item.id" :label="item.name">{{
                                item.name
                            }}</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </Dialog>
            <el-drawer
                v-model="drawer.visibile"
                custom-class="zw_drawer"
                direction="rtl"
                :size="1000"
                @close="onDrawerClose">
                <template #title>
                    <h4 class="drawer_tit">{{ drawer.title }}</h4>
                </template>
                <div class="content">
                    <el-tabs v-model="activeName" @tab-change="handleClick">
                        <el-tab-pane label="成功" :name="1">
                            <div v-if="activeName == 1">
                                <ZwSearchForm
                                    row-num="2"
                                    :option="searchSOption"
                                    @search="searchDetail"
                                    @reset="resetDetail" /><ZwTable
                                    ref="tableRef"
                                    class="table-box"
                                    :option="tableDetailSucess"
                                    :fetch-params="state.searchDetailParams"
                                    :fetch-api="fetchStatus()">
                                </ZwTable>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="失败" :name="2">
                            <div v-if="activeName == 2">
                                <ZwSearchForm
                                    row-num="3"
                                    :option="searchFOption"
                                    @search="searchDetail"
                                    @reset="resetDetail" /><ZwTable
                                    ref="tableRef"
                                    class="table-box"
                                    :option="tableDetailFail"
                                    :fetch-params="state.searchDetailParams"
                                    :fetch-api="fetchStatus()">
                                </ZwTable>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-drawer>
            <SendUrl :isopen="isopen" :title="title" :rowid="rowid" @close="isopen = false"></SendUrl>
        </el-card>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed, nextTick } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import Dialog from '@/components/Dialog.vue';
import ZWDrawer from '@/components/ZWDrawer.vue';
import SendUrl from '../components/SendUrl.vue';
import { deepCopy } from '@/utils/helper';
import {
    seaList,
    threeList,
    getClubLevel,
    getClubSource,
    newThree,
    changeStatus,
    importDetail
} from '@/api/customer/clubManage/commonSea';
import router from '@/router';
const tableRef = ref<HTMLElement | null>(null);
const DrawerRef = ref(null);
const isopen = ref(false);
const title = ref('');
const drawer = reactive({
    visibile: false,
    title: ''
});
const defaultParams = {};
const detailDefault = {
    third_import_id: '', //导入规则id
    is_success: ''
};
const state = reactive({
    searchParams: deepCopy(defaultParams),
    searchDetailParams: deepCopy(detailDefault)
});
const rowid = ref(''); //第三方接入数据id
const activeName = ref(1);
const form = reactive({
    name: '',
    clue_seas_id: '',
    clue_level_id: '',
    clue_source_id: ''
});
const onDrawerClose = () => {};
// 取消
const cancelHandel = () => {
    appDialog.visible = false;
};
//确定
const submitHandel = async () => {
    if (!form.name) {
        ElMessage.warning('规则名称不能为空');
        return;
    }
    if (!form.clue_seas_id) {
        ElMessage.warning('线索公海不能为空');
        return;
    }
    if (!form.clue_level_id) {
        ElMessage.warning('线索等级不能为空');
        return;
    }
    if (!rowid.value) {
        newThree(form).then(() => {
            ElMessage.success('新建成功');
            state.searchParams = { ...state.searchParams };
            appDialog.visible = false;
        });
    } else {
        newThree({ ...form, id: rowid.value }).then(() => {
            ElMessage.success('编辑成功');
            state.searchParams = { ...state.searchParams };
            appDialog.visible = false;
        });
    }
};
const appDialog = reactive({
    visible: false,
    title: '新建对接',
    width: '600px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
const tableOption = [
    {
        prop: 'name',
        label: '规则名称'
    },
    {
        prop: 'clue_sea_name',
        label: '关联公海'
    },
    {
        prop: 'enable',
        label: '状态',
        render({ row, column, index }) {
            if (row.enable == 1) {
                return '已停用';
            } else {
                return '已开启';
            }
        }
    },
    {
        label: '成功数量/失败客户数',
        prop: 'execute_workuser',
        render({ row, column, index }) {
            return row.success_num + '/' + row.fail_num;
        }
    },
    {
        prop: 'created_at',
        label: '创建时间'
    },
    {
        prop: 'operate',
        label: '操作',
        width: 295,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row }) {
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => {
                            newImport(row);
                        }}>
                        编辑
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            rowid.value = row.id;
                            isopen.value = true;
                            title.value = `【${row.name}】推送地址`;
                        }}>
                        推送地址
                    </ElButton>
                    <ElButton
                        size="small"
                        v-show={row.enable == 2}
                        onClick={() => {
                            change(row.id, 1);
                        }}>
                        停用
                    </ElButton>
                    <ElButton
                        size="small"
                        v-show={row.enable == 1}
                        onClick={() => {
                            change(row.id, 2);
                        }}>
                        开启
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            detailDefault.third_import_id = row.id;
                            detailDefault.is_success = activeName.value;
                            drawer.visibile = true;
                            drawer.title = `导入明细`;
                            // DrawerRef.value.width = 1000
                            // DrawerRef.value.drawer = true
                            // DrawerRef.value.isShow = false
                            // DrawerRef.value.title = ''
                        }}>
                        导入明细
                    </ElButton>
                </>
            );
        }
    }
];
const tableDetailSucess = [
    {
        prop: 'clue_id',
        label: '线索ID'
    },
    {
        prop: 'clue_name',
        label: '客户名称'
    },
    {
        prop: 'mobile',
        label: '手机号',
        width: 120
    },
    {
        label: 'unionId',
        prop: 'unionid'
    },
    {
        prop: 'openid',
        label: 'openId'
    },
    {
        prop: 'distribution_status',
        label: '分配情况',
        render({ row, column, index }) {
            if (row.distribution_status == 1) {
                return '待分配';
            } else {
                return '已分配';
            }
        }
    },
    {
        prop: 'import_time',
        label: '入库时间',
        width: 220
    }
];
const tableDetailFail = [
    {
        prop: 'clue_id',
        label: '线索ID'
    },
    {
        prop: 'clue_name',
        label: '客户名称'
    },
    {
        prop: 'mobile',
        label: '手机号'
    },
    {
        label: 'unionId',
        prop: 'unionid'
    },
    {
        prop: 'openid',
        label: 'openId'
    },
    {
        prop: 'err_msg',
        label: '失败原因'
    },
    {
        prop: 'import_time',
        label: '入库时间'
    }
];
const searchOption = computed(() => {
    return [
        {
            label: '规则名称',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '请输入规则名称'
        }
    ];
});
const searchSOption = computed(() => {
    return [
        {
            label: '客户手机',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '请输入客户手机进行搜索'
        }
    ];
});
const searchFOption = computed(() => {
    return [
        {
            label: '客户手机',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '请输入客户手机进行搜索'
        }
    ];
});

const seaids = ref([]); //公海列表
const levelid = ref<any>([]); //线索等级列表
const sourceid = ref<any>([]); //线索来源
//获取公海列表
const getSeaList = () => {
    seaList({ page: 1, page_size: 99, is_not_list: 1 }).then((res: any) => {
        seaids.value = res.data;
    });
};
//获取线索等级
const getLevelList = () => {
    getClubLevel({ page: 1, page_size: 99 }).then((res: any) => {
        res.data.forEach((item: any) => {
            if (item.status == 1) {
                //筛选已开启的线索等级
                levelid.value.push(item);
            }
        });
    });
};
//获取线索来源
const getSourceList = () => {
    getClubSource({ page: 1, page_size: 99 }).then((res: any) => {
        res.data.forEach((item: any) => {
            if (item.status == 1) {
                //筛选开始的线索来源
                sourceid.value.push(item);
            }
        });
    });
};
//
const newImport = async (row?: any) => {
    await getSeaList();
    await getLevelList();
    await getSourceList();
    if (row) {
        rowid.value = row.id;
        form.name = row.name;
        form.clue_seas_id = row.clue_seas_id;
        form.clue_level_id = row.clue_level_id;
        form.clue_source_id = row.clue_source_id ? row.clue_source_id : '';
        appDialog.title = '编辑对接';
    } else {
        form.clue_seas_id = Number(router.currentRoute.value.query.seas_id);
        form.name = '';
        form.clue_level_id = '';
        form.clue_source_id = '';
        rowid.value = '';
        appDialog.title = '新建对接';
    }
    appDialog.visible = true;
};
//切换转态
const change = (id: any, enable: any) => {
    changeStatus({ id, enable }).then(() => {
        state.searchParams = { ...state.searchParams };
        ElMessage.success(enable == 1 ? '停用成功' : '开启成功');
    });
};
// 获取第三方接入列表
const fetch = () => {
    return threeList;
};
//第三方接入列表查询
const search = (v: any) => {
    state.searchParams = v;
};
//导入明细查询
const searchDetail = (v: any) => {
    state.searchDetailParams = v;
};
//第三方接入列表清空
const reset = () => {
    state.searchParams = deepCopy(defaultParams);
};
//导入明细清空
const resetDetail = (v: any) => {
    state.searchDetailParams = deepCopy(detailDefault);
};
const getids = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(detailDefault);
        }, 1);
    });
};
// 获取导入明细列表
const fetchStatus = async () => {
    const id = await getids();
    return [id, importDetail];
};
//导入明细tab切换
const handleClick = (data: any) => {
    detailDefault.is_success = activeName.value;
};
</script>
<style scoped lang="scss">
.form_box {
    margin-top: 14px;
    padding-left: 4px;

    .el-select {
        width: 100%;
    }
}
</style>
